<template>
  <page-view class="movieList">
    <movie-item @showImage="showImage" v-for="(item,index) in hotMovieList" :key="index" :m_item="item" :m_index="index"></movie-item>
  </page-view>
</template>
<script>
import { mapActions } from "vuex"
import MovieItem from "../components/MovieItem.vue"
// 正在热映
export default {
  name: "Hot",
  data() {
    return {
      hotMovieList: []
    };
  },
  created() {
    this.getHotMovieList();
  },
  //计算属性
  computed: {
    previewImageUrls() {
      return this.hotMovieList.map(item => {
        let imgWidth = document.documentElement.clientWidth;
        let imgHeight = parseInt((imgWidth * 180) / 128);
        return item.img.replace("w.h", `${imgWidth}.${imgHeight}`);
      });
    }
  },
  methods: {
    ...mapActions(["showLoading", "hideLoading", "showPreviewImage","showActionSheet"]),
    async getHotMovieList() {
      //第一个参数代表vuex里面的action方法名称 ,第二个开始参是真正传到方法里面的参数
      // this.$store.dispatch("showLoading");
      this.showLoading();
      let resp = await this.$http.get("/maoyanApi/ajax/movieOnInfoList");
      this.hotMovieList = resp.data.movieList;
      // this.$store.dispatch("hideLoading");
      this.hideLoading();
    },
    showImage(index){
      this.showPreviewImage({
        current:index,
        urls:this.previewImageUrls
      });
    }
    
    
  },
  filters: {
    formatImgSrc(oldImgSrc) {
      return oldImgSrc.replace("w.h", "128.180");
    }
  },
  components:{
    MovieItem
  }
};
</script>

<style lang="scss" scoped>

</style>